<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue+vant+vue-router</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>

        <style>
            .router-link-active,
            .myclass {
                background: chocolate;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <router-view></router-view>
            <van-tabbar route>
                <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
                <van-tabbar-item replace to="/user" icon="search">我的</van-tabbar-item>
                <van-tabbar-item replace to="./page1.html" icon="search">测试</van-tabbar-item>
            </van-tabbar>

        </div>
        <script>
           // import page1 from "./page1.html";
            //创建两个子组件 模板对象
            var home = {
                template: '<h3>首页内容<h3>'
            }
            var user = {
                template: '<h3>我的内容</h3>'
            }
            
            
            //创建路由对象
            var routerObj = new VueRouter({
                //配置路由规则
                routes: [
                    //重定向设置
                    {
                        path: '/',
                        redirect: '/user'
                    },
                    {
                        path: '/home',
                        component: home
                    },
                    {
                        path: '/user',
                        component: user
                    },
                    {
                        path: './page1.html',
                        // component: page1
                       
                    }
                ],
                linkActiveClass: 'myclass'
            })
            new Vue({
                el: '#app',
                data: {},
                methods: {},
                router: routerObj
            })
        </script>
        
        
      
    </body>
</html>
